<template>
  <div class="add-video-btn-con">
    <color-normal v-model="commonAttr.maskColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
    <input-normal label="视频播放按钮宽度" v-model="commonAttr.playBtnWidth" @change="onChangeAttr"></input-normal>
    <input-normal label="视频播放按钮高度" v-model="commonAttr.playBtnHeight" @change="onChangeAttr"></input-normal>
    <slider-normal v-model="commonAttr.playBtnFontSize" label="视频播放按钮大小" :max="300" :step="1" @change="onChangeAttr"></slider-normal>
    <color-normal v-model="commonAttr.playBtnColor" label="播放按钮颜色" format="rgb" @change="onChangeAttr"></color-normal>
    <slider-normal v-model="commonAttr.borderRadius" label="圆角" :max="300" :step="1" @change="onChangeAttr"></slider-normal>
    <dropdown-normal v-model="commonAttr.borderStyle" :valLists="BORDER_STYLES" label="边框类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
    <div v-if="commonAttr.borderStyle != BORDER_STYLES[0].value">
      <slider-normal v-model="commonAttr.borderSize" label="边框大小" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.borderColor" label="边框颜色" format="rgb" @change="onChangeAttr"></color-normal>
    </div>
  </div>
</template>
<script>
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'

  import { editUtils } from '@/views/js/edit-utils'

export default {
  mixins: [editUtils],
  components:{
    InputNormal,
    ColorNormal,
    SliderNormal,
    DropdownNormal,
  },
};
</script>


